.pic img {
	float: right;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	clear: both;
}

.pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0em;
}

.pic a {
  text-decoration: none;
  color: #039;
}

.pic a .hotspot {
  width: 100px;
  height: 120px;
  position: relative;
}

.pic a .link {
  position: relative;
  display: block;
  width: 15em;
}

/* :BUG: This rule on it's own does not work in IE  */
.pic a:hover .hotspot {
  border: 1px solid #fff;
}

/* :BUG: Neither does this rule  */
.pic a:hover .link {
  color: #0066FF;
}

/* However if you add this rule, both the previous rules now work. Weird*/
.pic a:hover {
  border: none;
}


.pic .rich a .hotspot {
  top: 15px;
  left: 95px;
}

.pic .andy a .hotspot {
  top: 115px;
  left: 280px;
}

.pic .jeremy a .hotspot {
  top: 250px;
  left: 425px;
}


.pic .rich a .link {
  bottom: -2em;
  left: 0;
}

.pic .andy a .link {
  bottom: -3.2em;
  left: 0;
}

.pic .jeremy a .link {
  bottom: -4.4em;
  left: 0;
}
